import ReactEcharts from 'echarts-for-react'
import React from 'react';

function pieChartLegend(props: { sourceList: any; isRate: any }) {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/> {d}%'
    },
    color: ["#388EDE", "#5DB081", "#F3B343", "#5F7097", "#ED7656", "#975F84", "#DDDDDD"],
    legend: {
      y: 'center',
      x: props.isRate ? '55%' :'60%', //legend在宽度55%的地方开始显示,(原理:legend会自动换行,限制宽度即可)
      icon: "circle",
      textStyle: {
        fontSize: 12,
        lineHeight: 18,
        rich: {
          a: {
            fontSize: 16,
            fontWeight: 600,
          },
        },
      },
      formatter: props.isRate ? ((name: any) => {
        let data = option.series[0].data
        let total = 0
        let tarValue
        for (let i = 0; i < data.length; i++) {
          total += data[i].value
          if (data[i].name == name) {
            tarValue = data[i].value
          }
        }
        let p = Math.round((tarValue / total) * 100);//计算出百分比,四舍五入
        return [
          name,
          '{a| ' + p + '} %',
        ].join('\n')
      }) : null
    },
    series: [
      {
        type: 'pie',
        radius: [20, 50],
        center: ['20%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false
        },
        data: props.sourceList
      },
    ],
  }

  return <ReactEcharts style={{height:100,width:'100%'}} notMerge={true} option={option} />;
}
export default pieChartLegend;



